@import "gridle/gridle"

+gridle_setup((context: 12, gutter-width: 0, gutter-left: 0, gutter-right: 0))

+gridle_register_state(tablet, (min-width: 1024px))
+gridle_register_state(mobile, (max-width: 480px))
+gridle_init()

// 布局
=layout-container()
  max-width: 1400px
  min-width: 1024px
  +gridle_state(mobile)
    min-width: 360px
  &.center
    margin: 0 auto

// 表单元素
=input($h: 34px, $padding: 5px 10px, $radius: 3px)
  height: $h
  padding: $padding
  border-radius: $radius
  border: 1px solid #E3E3E3
  &:focus
    outline: none
    border-radius: $radius
    box-shadow: 0 0 0 1px rgba(#ccc, .5) inset
  &[disabled]
    background: #fff
    border-color: #fff
    border-bottom: 1px solid #E3E3E3

=select($h: 34px, $radius: 3px)
  height: $h
  padding: $padding
  border-radius: $radius
  border: 1px solid #E3E3E3

// aria-label
=aria-label($color: #999, $bg: rgba(#fff, .5), $z: 999, $t: 110%, $r: 50%, $l: auto)
  &[aria-label]
    position: relative
    &:after
      content: attr(aria-label)
      display: none
      position: absolute
      top: $t
      right: $r
      left: $l
      z-index: $z
      color: $color
      background-color: $bg
      pointer-events: none
      padding: 8px 10px
      line-height: 15px
      white-space: nowrap
      overflow: visible

// 按钮
=btn($bg, $color)
  cursor: pointer
  background: $bg
  border: 1px solid lighten($color, 10%)
  text-align: center
  color: $color
  &:hover
    background: darken($bg, 10%)
  &:active
    background: lighten($bg, 10%)
  &[disabled]
    cursor: default

// 表格
=table()
  border-spacing: 0
  background: #FFF
  border: 1px solid #ebebeb
  th, td
    height: 40px
    text-align: center
    &.left
      text-align: left
      text-indent: 15px
  thead
    background: #F5F7F8
    th
      border-bottom: 1px solid #ebebeb
      color: #222
      &:last-child
        border-right: 1px solid #ebebeb
  tbody
    tr
      &:nth-child(even)
        background: #F5F7F8
    td
      color: #666
      border-right: 1px solid #EBEBEB
  tfoot
    td
      border-top: 1px solid #ebebeb
      &:last-child
        border-right: 1px solid #ebebeb
